<template>
	<h3>StateDemo</h3>
	count {{ count }} <br />
	countAlias {{ number }} <br />
	{{ countPlusLocalState }} <br />
	<hr>
	{{name}} / {{age}}
</template>

<script>
	// 在单独构建的版本中辅助函数为 Vuex.mapState
	import { mapState } from "vuex";

	export default {
		data() {
			return {
				localData: 1,
			};
		},
		// ...
		computed: {
			...mapState({
				// 箭头函数可使代码更简练
				count: (state) => state.count,

				// 传字符串参数 'count' 等同于 `state => state.count`
				number: "count",

				// 为了能够使用 `this` 获取局部状态，必须使用常规函数
				countPlusLocalState(state) {
					return state.count + this.localData;
				},
			}),
			...mapState(["name","age"])
		},
	};
</script>
